import React from 'react'
import Reflux from 'reflux'
import ReactMixin from 'react-mixin'
import Navbar from '../navbar'
import Router,{Link} from'react-router'
import Stores from '../store';
import actions from '../actions';

export default class Addaddress extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            index: this.props.location.query.index,
            isDef: false,
            checkB: false
        }
    }

    defaultAddressBtn(){
        this.setState({
            isDef:!this.state.isDef
        })
    }

    addInfo(){
        let item = {
            name : this.refs.name.value,
            phone : this.refs.phone.value,
            address : this.refs.address.value,
            place : this.refs.place.value,
            isDef:this.state.isDef
        };
        if(!!item.name && !!item.phone && !!item.address && !!item.place ){
            actions.addAddress(item)
        }

    }
    checkBtn(){

        if (this.refs.name.value && this.refs.phone.value && this.refs.address.value && this.refs.place.value ){
            this.setState({
                checkB: true
            })
        }else {
            this.setState({
                checkB: false
            })
        }
    }
    render() {
        return (
            <div className="address-add">

                <Navbar title="添加地址"/>
                <div className="address-add-box">
                    <div className="address-add-name">收货人：
                        <input className="address-add-name-input" ref="name" type="text"  onChange={this.checkBtn.bind(this)}/>
                    </div>
                    <div className="address-add-phone" >
                        手机号：
                        <input className="address-add-phone-input" ref="phone" type="text" onChange={this.checkBtn.bind(this)} />
                    </div>
                    <div className="address-add-address">
                        省、市、区：
                        <input className="address-add-address-input" ref="address" type="text" onChange={this.checkBtn.bind(this)} />
                        <i className="iconfont icon-next"></i>
                    </div>
                    <div className="address-add-place">
                        街道地址：
                        <textarea className="address-add-place-input" ref="place" type="text" onChange={this.checkBtn.bind(this)}/>
                    </div>
                    <div className="address-add-set">
                        <div className="address-add-set-left">
                            默认地址：
                            <span className="address-add-set-left-s">每次下单默认使用该地址</span>

                        </div>
                        <div className={`address-add-set-right ${this.state.isDef ?"active" : ""}`} onClick={this.defaultAddressBtn.bind(this)}>
                            <div className={`address-add-set-right-c ${this.state.isDef ?"active" : ""}`}></div>
                        </div>
                    </div>
                </div>

                <Link to="/address">
                    <div className={`address-btn address-add-btn ${this.state.checkB ? "" : "active"} `} onClick={this.addInfo.bind(this)}>
                        保存并应用
                    </div>
                </Link>
            </div>
        )
    }
}
